<template>
  <div class="portrait">
    <div class="search">
      <el-form ref="form" label-width="0px" size="mini">
        <el-form-item>
          <el-select value="" placeholder="选择对象">
            <el-option label="区域一" value="选择对象"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-button-group>
        <el-button type="primary" icon="el-icon-treedisplay"></el-button>
        <el-button icon="el-icon-ringdisplay"></el-button>
        <el-button icon="el-icon-griddisplay"></el-button>
        <el-button icon="el-icon-Automaticdisplay"></el-button>
      </el-button-group>
      <div class="button-group-operate">
        <el-button icon="el-icon-new">
          新增
        </el-button>
        <el-button icon="el-icon-editor">
          编辑
        </el-button>
        <el-button icon="el-icon-delete" @click="dialogDelete=true">
          删除
        </el-button>
        <el-button icon="el-icon-save" @click="dialogSave=true">
          保存
        </el-button>
        <el-button icon="el-icon-export" @click="dialogInport=true">
          导出
        </el-button>
      </div>
    </div>
    <div class="diagrampanel">
      <div class="diagram">
        <cytoscape type="2" @cytoscapeclick="cytoscapeclick"></cytoscape>

      </div>
      <div class="attribute">
        <el-tabs v-model="tabs.attribute" disabled="true" @tab-click="tabsAttribute">
          <el-tab-pane label="属性" name="c1">
            <div v-if="mainCircle==0">
              <div class="panel">
                <div class="panel-title icon-basicinformationattribute">
                  基础信息
                </div>
                <div class="panel-con attribute-1">
                  <p>交换机名称：交换机A</p>
                  <p>子网列表：</p>
                  <table>
                    <thead>
                      <tr>
                        <td width="36">序号</td>
                        <td width="172">名称</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>&nbsp;</td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="panel">
                <div class="panel-title icon-Runtheinformation">
                  运行信息
                </div>
                <div class="panel-con">
                  <div id="c4">
                    <diagram-echarts :data="diagramEcharts.c4" :show="diagram.c4" type="style1"></diagram-echarts>
                  </div>
                </div>
              </div>
              <div class="panel">
                <div class="panel-title icon-Noteinformation">
                  备注信息
                </div>
                <div class="panel-con  attribute-2">
                  <p>变更信息：</p>
                  <table>
                    <thead>
                      <tr>
                        <td width="36">序号</td>
                        <td width="58">时间</td>
                        <td width="56">名称</td>
                        <td width="56">内容</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>&nbsp;</td>
                        <td> </td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="shendudongcha" v-if="mainCircle==2">
              <div class="panel">
                <div class="panel-title icon-basicinformationattribute">
                  基础信息
                </div>
                <div class="panel-con attribute-1">
                  <p>业务系统名称：业务系统名称A</p>
                  <p>统计信息：</p>
                  <table>
                    <thead>
                      <tr>
                        <td width="36">序号</td>
                        <td width="172">名称</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>&nbsp;</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="panel">
                <div class="panel-title icon-Runtheinformation">
                  深度洞察
                </div>
                <div class="panel-con">
                  <el-form ref="form" label-width="0px" size="mini">
                    <el-form-item>
                      <el-select value="" placeholder="选择KPI指标">
                        <el-option label="区域一" value="选择KPI指标"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
            <div class="qushiyuce" v-if="mainCircle==3">
              <div class="panel">
                <div class="panel-title icon-basicinformationattribute">
                  业务系统001简介
                </div>
                <div class="panel-con attribute-1">
                  <p>名称：业务系统名称</p>
                  <p>简介内容：内容内容</p>
                  <p>简介内容：内容内容</p>
                </div>
              </div>
              <div class="panel">
                <div class="panel-title icon-Runtheinformation">
                  业务组件列表
                </div>
                <div class="panel-con attribute-1">

                  <table>
                    <thead>
                      <tr>
                        <td width="36">序号</td>
                        <td width="97">名称</td>
                        <td width="75">时间</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>&nbsp;</td>
                        <td></td>
                        <td></td>
                      </tr>

                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="lujingfenxi" v-if="mainCircle==4">
              <div class="panel">
                <div class="panel-title icon-basicinformationattribute">
                  基础信息
                </div>
                <div class="panel-con attribute-1">
                  <p>业务系统名称：系统名称</p>
                </div>
              </div>
              <div class="panel">
                <div class="panel-title icon-Runtheinformation">
                  信息列表
                </div>
                <div class="panel-con attribute-1">

                  <table>
                    <thead>
                      <tr>
                        <td width="36">序号</td>
                        <td width="58">时间</td>
                        <td width="56">名称</td>
                        <td width="56">内容</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>&nbsp;</td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>

                    </tbody>
                  </table>
                </div>
              </div>
              <div class="panel">
                <div class="panel-title icon-Runtheinformation">
                  访问路径清单
                </div>
                <div class="panel-con attribute-1">
                  <div class="pathpanel">
                    <div class="path">
                      <span>路径1：</span>
                      <div>
                        <a>A</a>
                        <a class="active">B</a>
                        <a> C</a>
                      </div>
                    </div>
                    <div class="path">
                      <span>路径2：</span>
                      <div>
                        <a>D</a>
                        <a>E</a>
                        <a> F</a>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
            <div class="huisuliebiao" v-if="mainCircle==5">
              <div class="panel">
                <div class="panel-title icon-basicinformationattribute">
                  网络基本信息
                </div>
                <div class="panel-con attribute-1">
                  <p>交换机名称：交换机A</p>
                  <p>子网列表：</p>
                  <table>
                    <thead>
                      <tr>
                        <td width="36">序号</td>
                        <td width="172">名称</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>&nbsp;</td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="panel">
                <div class="panel-title icon-Noteinformation">
                  业务组件列表
                </div>
                <div class="panel-con">
                  <table>
                    <thead>
                      <tr>
                        <td width="36">序号</td>
                        <td width="97">名称</td>
                        <td width="74">时间</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>&nbsp;</td>
                        <td> </td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td> </td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="panel">
                <div class="panel-title icon-Noteinformation">
                  回溯列表
                </div>
                <div class="panel-con  attribute-2">
                  <table>
                    <thead>
                      <tr>
                        <td width="36">序号</td>
                        <td width="97">名称</td>
                        <td width="74">时间</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr @click="huisuclick">
                        <td>&nbsp;</td>
                        <td>1</td>
                        <td>2</td>
                      </tr>
                      <tr @click="huisuclick">
                        <td>&nbsp;</td>
                        <td>1</td>
                        <td>2</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="直方图" disabled="true" name="c2">
            直方图
          </el-tab-pane>
          <el-tab-pane label="文件" disabled="true" name="c3">
            角色管文件理
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="clear"></div>
    </div>
    <div class="diagrambottom" v-if="mainCircle!=0">
      <el-tabs v-model="tabs.diagram">
        <el-tab-pane class="tabdiagram-1" :disabled="tabs.diagram!='c1'" label="时间轴" name="c1">
          <div v-if="mainCircle==6">
            <div class="panel">
              <div class="panel-title icon-KPIindexname">
                告警指标分析
              </div>
              <div class="panel-con">
                <div id="c5">
                  <diagram-echarts :data="diagramEcharts.c5" type="style1" :show="diagram.c5"></diagram-echarts>
                </div>

              </div>
            </div>
            <el-collapse accordion="">
              <el-collapse-item>
                <template slot="title">
                  网络负载
                  <span>共189条</span>
                </template>
                <el-table :data="json.portraitC1" height="141" border="" style="width: 100%">
                  <el-table-column prop="c1" label="序号" width="51">
                  </el-table-column>
                  <el-table-column prop="c2" label="告警ID" width="91">
                  </el-table-column>
                  <el-table-column prop="c3" label="时间" width="149">
                  </el-table-column>
                  <el-table-column prop="c4" label="级别" width="75">
                  </el-table-column>
                  <el-table-column prop="c5" label="类别" width="75">
                  </el-table-column>
                  <el-table-column prop="c6" label="所属系统" width="99">
                  </el-table-column>
                  <el-table-column prop="c7" label="组件">
                  </el-table-column>
                  <el-table-column prop="c8" label="正常值范围" width="87">
                  </el-table-column>
                  <el-table-column prop="c9" label="触发值" width="63">
                  </el-table-column>
                  <el-table-column prop="c10" label="持续时间" width="94">
                  </el-table-column>
                  <el-table-column prop="c11" label="状态" width="63">
                    <template slot-scope="scope">
                      <span :class="scope.row.c11==1?'f1':'f2'">{{ scope.row.c11==1?'已处理':'未处理' }} </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="c12" label="处置措施" width="82">
                    <template slot-scope="scope">
                      <a>编辑</a>
                    </template>
                  </el-table-column>
                  <el-table-column prop="c13" label="排障助手" width="86">
                    <template slot-scope="scope">
                      <a>编辑</a>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  吞吐量
                  <span>共189条</span>
                </template>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  网络负载
                  <span>共189条</span>
                </template>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  吞吐量
                  <span>共189条</span>
                </template>
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  网络负载
                  <span>共189条</span>
                </template>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="huisuliebiao" v-if="mainCircle==5">
            <div class="huisuliebiao-time">
              <div class="huisuliebiao-time-search">
                <el-form ref="form" size="mini">
                  <el-form-item label="时间范围：" label-width="90px">
                    <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" default-value="2010-10-01">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="当前时间刻度：" label-width="110px">
                    <el-select value="" placeholder="">
                      <el-option label="1分钟" value="shanghai"></el-option>
                      <el-option label="1分钟" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
              <div class="timeline">
                <div class="line">
                  <a v-for="(item,index) in huisuliebiao.time*2" v-bind:key="index"></a>
                </div>
                <div class="desc">
                  <a href="#">10:00</a>
                  <a href="#">11:00</a>
                  <a href="#">12:00</a>
                </div>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane class="tabdiagram-2" :disabled="tabs.diagram!='c2'" label="分析图表" name="c2">
          <div v-if="mainCircle==9">
            <div class="panel">
              <div class="panel-title icon-KPIindexname">
                KPI指标名称
              </div>
              <div class="panel-con">
                <div id="c1">
                  <diagram-echarts :show="diagram.c1" type="c1"></diagram-echarts>
                </div>
              </div>
            </div>
            <div class="panel">
              <div class="panel-title icon-KPIindexname">
                KPI指标名称
              </div>
              <div class="panel-con">
                <div id="c2">
                  <diagram-echarts :data="diagramEcharts.c4" type="style1" :show="diagram.c2"></diagram-echarts>
                </div>
              </div>
            </div>
            <div class="panel">
              <div class="panel-title icon-KPIindexname">
                KPI指标名称
              </div>
              <div class="panel-con">
                <div id="c3">
                  <diagram-echarts :data="diagramEcharts.c3" :show="diagram.c3" type="style2"></diagram-echarts>
                </div>
              </div>
            </div>
          </div>
          <div class="shendudongcha" v-if="mainCircle==2">
            <div class="tablewrap">
              <div class="panel">
                <div class="panel-title">
                  KPI数值
                </div>
                <div class="panel-con">
                  <ul>
                    <li> 子网名01 数值 </li>
                    <li> 子网名01 数值 </li>
                    <li> 子网名01 数值 </li>
                    <li> 子网名01 数值 </li>
                    <li> 子网名01 数值 </li>
                    <li> 子网名01 数值 </li>
                    <li> 子网名01 数值 </li>
                    <li> 子网名01 数值 </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="yewutubiao-2-2">
              <div id="c7">
                <diagram-echarts :data="diagramEcharts.c7" type="style1" :show="diagram.c7"></diagram-echarts>
              </div>
              <a href="#">异常标注</a>
            </div>
          </div>
          <div class="qushiyuce" v-if="mainCircle==3">
            <div class="panel">
              <div class="panel-title icon-Runtheinformation">
                速率
              </div>
              <div class="panel-con">
                <div id="c8">
                  <diagram-echarts :data="diagramEcharts.c4" type="style1" :show="diagram.c8"></diagram-echarts>
                </div>
              </div>
            </div>
            <div class="panel">
              <div class="panel-title icon-Runtheinformation">
                吞吐量
              </div>
              <div class="panel-con">
                <div id="c9">
                  <diagram-echarts :data="diagramEcharts.c4" type="style1" :show="diagram.c9"></diagram-echarts>
                </div>
              </div>
            </div>
            <div class="panel">
              <div class="panel-title icon-Runtheinformation">
                宽带
              </div>
              <div class="panel-con">
                <div id="c10">
                  <diagram-echarts :data="diagramEcharts.c4" type="style1" :show="diagram.c10"></diagram-echarts>
                </div>
              </div>
            </div>
            <div class="panel">
              <div class="panel-title icon-Runtheinformation">
                时延
              </div>
              <div class="panel-con">
                <div id="c11">
                  <diagram-echarts :data="diagramEcharts.c4" type="style1" :show="diagram.c11"></diagram-echarts>
                </div>
              </div>
            </div>
          </div>
          <div class="lujingfenxi" v-if="mainCircle==4">
            <div class="longpath">
              <div class="point">
                <a></a>
                <p>业务系统名称
                  <span>15%</span>
                </p>
              </div>
              <div class="point active">
                <a></a>
                <p>业务系统名称
                  <span>15%</span>
                </p>
              </div>
              <div class="point">
                <a></a>
                <p>业务系统名称
                  <span>15%</span>
                </p>
              </div>
              <div class="point">
                <a></a>
                <p>业务系统名称
                  <span>15%</span>
                </p>
              </div>
              <div class="point">
                <a></a>
                <p>业务系统名称
                  <span>15%</span>
                </p>
              </div>
              <div class="point">
                <a></a>
                <p>业务系统名称
                  <span>15%</span>
                </p>
              </div>
              <div class="point">
                <a></a>
                <p>业务系统名称
                  <span>15%</span>
                </p>
              </div>
            </div>
            <el-table :data="json.portraitC2" height="140">
              <el-table-column prop="c1" label="序号" width="51">
              </el-table-column>
              <el-table-column prop="c2" label="地点" width="300">
              </el-table-column>
              <el-table-column prop="c3" label="成功数量" width="267">
              </el-table-column>
              <el-table-column prop="c4" label="失败数量" width="267">
              </el-table-column>
              <el-table-column prop="c5" label="成功率">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane class="tabdiagram-3" :disabled="tabs.diagram!='c3'" label="散点图" name="c3">
          <div id="c6" v-if="diagram.c6">
            <diagram-echarts type="style3" :data="diagramEcharts.c6" :show="diagram.c6"></diagram-echarts>
          </div>
          <el-table :data="json.portraitC2" stripe="" style="width: 100%">
            <el-table-column prop="c1" label="序号">
            </el-table-column>
            <el-table-column prop="c2" label="开始时间">
            </el-table-column>
            <el-table-column prop="c3" label="响应时间">
            </el-table-column>
            <el-table-column prop="c4" label="用户名">
            </el-table-column>
            <el-table-column prop="c5" label="交易类型">
            </el-table-column>
            <el-table-column prop="c6" label="服务器">
            </el-table-column>
            <el-table-column prop="c7" label="实例">
            </el-table-column>
            <el-table-column prop="c8" label="URL路径" width="180">
            </el-table-column>
            <el-table-column prop="c9" label="客户机IP">
            </el-table-column>
            <el-table-column prop="c10" label="异常">
            </el-table-column>
            <el-table-column prop="c11" label="延迟">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="会话列表" width="750px">
      <el-table :data="json.portraitC4" height="200">
        <el-table-column property="c1" label="序号" width="51"></el-table-column>
        <el-table-column property="c2" label="开始时间" width="94"></el-table-column>
        <el-table-column property="c3" label="响应时间" width="94"></el-table-column>
        <el-table-column property="c4" label="用户名" width="63"></el-table-column>
        <el-table-column property="c5" label="客户端IP" width="107"></el-table-column>
        <el-table-column property="c6" label="服务端IP" width="107"></el-table-column>
        <el-table-column property="c7" label="返回码" width="64"></el-table-column>
        <el-table-column property="c8" label="会话详情" width="84"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog class="paizhangzhushou" title="排障助手" width="750px">
      <el-form ref="form" size="mini">
        <div class="search search-dialog">

          <el-form-item label="业务系统：" label-width="90px">
            <el-select value="" placeholder="选择对象">
              <el-option label="区域一" value="选择对象"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间：" label-width="60px">
            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" default-value="2010-10-01">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">
              开始分析
            </el-button>
          </el-form-item>

        </div>
        <div class="panel">
          <div class="panel-title icon-Noteinformation">
            告警清单
          </div>
          <div class="panel-con">
            <el-table :data="json.portraitC4" height="84">
              <el-table-column property="c1" label="序号" width="51"></el-table-column>
              <el-table-column property="c2" label="级别" width="51"></el-table-column>
              <el-table-column property="c3" label="发生时间" width="97"></el-table-column>
              <el-table-column property="c4" label="规则ID" width="87"></el-table-column>
              <el-table-column property="c5" label="类别" width="75"></el-table-column>
              <el-table-column property="c6" label="业务系统" width="75"></el-table-column>
              <el-table-column property="c7" label="组件" width="111"></el-table-column>
              <el-table-column property="c8" label="指标" width="83"></el-table-column>
            </el-table>
            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title icon-KPIindexname">
            告警指标分析
          </div>
          <div class="panel-con">
            <div id="c12" style="height:141px;">
              <diagram-echarts :show="diagram.c12" type="1"></diagram-echarts>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title icon-Noteinformation">
            日志清单
            <div class="panel-search">
              <el-form-item>
                <el-input></el-input>
                <el-button type="search"></el-button>
              </el-form-item>
            </div>
          </div>
          <div class="panel-con">
            <el-table :data="json.portraitC4" height="84">
              <el-table-column property="c1" label="序号" width="51"></el-table-column>
              <el-table-column property="c2" label="时间" width="94"></el-table-column>
              <el-table-column property="c3" label="系统名称" width="75"></el-table-column>
              <el-table-column property="c4" label="组件名称" width="75"></el-table-column>
              <el-table-column property="c5" label="IP" width="75"></el-table-column>
              <el-table-column property="c6" label="类别" width="76"></el-table-column>
              <el-table-column property="c7" label="种类" width="75"></el-table-column>
              <el-table-column property="c8" label="内容" width="109"></el-table-column>
            </el-table>
            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title icon-Noteinformation">
            事件清单
          </div>
          <div class="panel-con">
            <el-table :data="json.portraitC4" height="84">
              <el-table-column property="c1" label="事件ID" width="87"></el-table-column>
              <el-table-column property="c2" label="事件描述" width="123"></el-table-column>
              <el-table-column property="c3" label="状态" width="75"></el-table-column>
              <el-table-column property="c4" label="应用时间" width="97"></el-table-column>
              <el-table-column property="c5" label="备注" width="251"></el-table-column>
            </el-table>
            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title icon-Noteinformation">
            知识库
            <div class="panel-search">
              <el-form-item>
                <el-input></el-input>
                <el-button type="search"></el-button>
              </el-form-item>
            </div>
          </div>
          <div class="panel-con">
            <el-table :data="json.portraitC4" height="68">
              <el-table-column property="c1" label="时间" width="99"></el-table-column>
              <el-table-column property="c2" label="问题描述" width="177"></el-table-column>
              <el-table-column property="c3" label="处置措施" width="175"></el-table-column>
              <el-table-column property="c4" label="处置人" width="183"></el-table-column>
            </el-table>
            <div class="compage">
              <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
            </div>
          </div>
        </div>
        <div class="clear"></div>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>

      </el-form>

    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogDelete">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否删除当前所选数据
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogDelete = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogSave">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否保存当前页面
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogSave = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Config from "../config/index";
import Data from "../data/index";
import $ from "jquery";
import Diagram from "../diagram/portrait";
import cytoscape from "../components/portrait/cytoscape";
import diagramEcharts from "../components/portrait/echarts";
let cy = null;
export default {
  name: "Portrait2",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      dialogAdd: false,
      dialogAddTitle: "创建",
      dialogDelete: false,
      dialogSave: false,
      dialogInport: false,
      dialogExport: false,
      cytoscapezoom: 100,
      mainCircle: 0, //0基本信息 1分析图表 2深度洞察 3趋势预测 4路径分析 5回溯列表
      tabs: {
        attribute: "c1",
        diagram: "c1"
      },
      huisuliebiao: {
        time: 60
      },
      json: {
        portraitC1: Data.portraitC1,
        portraitC2: Data.portraitC2,
        portraitC4: Data.portraitC4
      },
      diagramEcharts: {
        c5: {
          isboundaryGap: true,
          color: "#E1684D",
          xAxisData: [
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00"
          ]
        },
        c6: {
          series: [
            {
              type: "scatter",
              symbolSize: 8,
              data: Data.portraitC3[0]
            },
            {
              type: "scatter",
              symbolSize: 8,
              data: Data.portraitC3[1]
            }
          ]
        },
        c3: {
          legend: {
            orient: "vertical",
            right: 60,
            top: 40,
            data: [
              {
                name: "基本工资",
                icon: "roundRect"
              },
              {
                name: "各种津贴",
                icon: "roundRect"
              },
              {
                name: "加班工资",
                icon: "roundRect"
              },
              {
                name: "岗位工资",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          color: [
            "#06bba4",
            "rgba(248,154,0,1)",
            "rgba(91,150,237,1)",
            "rgba(225,104,77,1)"
          ],
          series: [
            {
              name: "CPU",
              type: "pie",
              radius: ["50%", "75%"],
              center: ["30%", "60%"],
              data: [
                { value: 335, name: "基本工资" },
                { value: 310, name: "各种津贴" },
                { value: 234, name: "加班工资" },
                { value: 135, name: "岗位工资" }
              ]
            }
          ]
        },
        c4: {
          legend: {
            data: [
              {
                name: "CPU",
                icon: "roundRect"
              },
              {
                name: "内存",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          xAxisData: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00"],
          series: [
            {
              name: "CPU",
              type: "line",
              barWidth: 1,
              data: [25, 10, 23, 10, 15, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#06BBA4" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "内存",
              type: "line",
              barWidth: 1,
              data: [10, 15, 25, 10, 23, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(248,154,0,1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        },
        c7: {
          legend: {
            data: [
              {
                name: "子网名称01",
                icon: "roundRect"
              },
              {
                name: "子网名称02",
                icon: "roundRect"
              },
              {
                name: "子网名称03",
                icon: "roundRect"
              }
            ],
            itemWidth: 5,
            itemHeight: 5
          },
          xAxisData: ["23:00", "00:00", "01:00", "02:00", "03:00", "04:00"],
          series: [
            {
              name: "子网名称01",
              type: "line",
              barWidth: 1,
              data: [25, 10, 23, 10, 15, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#06BBA4" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "子网名称02",
              type: "line",
              barWidth: 1,
              data: [10, 15, 25, 10, 23, 15, 25, 10],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(248,154,0,1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              name: "子网名称03",
              type: "line",
              barWidth: 1,
              data: [15, 25, 10, 10, 15, 25, 10, 23],
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(248,154,0,1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        }
      },
      diagram: {
        c1: false,
        c2: false,
        c3: false,
        c4: false,
        c5: false,
        c6: false,
        c7: false,
        c8: false,
        c9: false,
        c10: false,
        c11: false,
        c12: false
      }
    };
  },
  components: {
    diagramEcharts,
    cytoscape
  },

  mounted() {
    let seriesData = [];
    for (var i = 0; i < 12; i++) {
      seriesData.push({
        type: "bar",
        barWidth: 4,
        data: [100, 200, 100, 200, 100, 200, 100, 200, 100]
      });
    }
    this.diagramEcharts.c5.series = seriesData;

    if (this.mainCircle == 0) {
      this.diagram.c4 = true;
    } else if (this.mainCircle == 1) {
      this.diagram.c4 = true;
      this.diagram.c5 = true;
    } else if (this.mainCircle == 2) {
      this.diagram.c7 = true;
    } else if (this.mainCircle == 3) {
      this.diagram.c8 = true;
    } else if (this.mainCircle == 5) {
      this.diagram.c12 = true;
    }
    this.tabsAttribute();
  },
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    cytoscapeclick(index) {
      this.mainCircle = index; //0基本信息 1分析图表 2深度洞察 3趋势预测 4路径分析 5回溯列表 6告警 7用户体验  9KPI 10报表
      console.log("cytoscapeclick", index);
      if (this.mainCircle == 1) {
      } else if (this.mainCircle == 2) {
        this.tabs.diagram = "c2";
        this.diagram.c7 = true;
      } else if (this.mainCircle == 3) {
        this.tabs.diagram = "c2";
        this.diagram.c8 = true;
        this.diagram.c9 = true;
        this.diagram.c10 = true;
        this.diagram.c11 = true;
      } else if (this.mainCircle == 4) {
        this.tabs.diagram = "c2";
      } else if (this.mainCircle == 5) {
        this.tabs.diagram = "c1";
      } else if (this.mainCircle == 6) {
        this.diagram.c5 = true;
        this.tabs.diagram = "c1";
      } else if (this.mainCircle == 7) {
        this.tabs.diagram = "c3";
        this.diagram.c6 = true;
      } else if (this.mainCircle == 8) {
      } else if (this.mainCircle == 9) {
        this.tabs.diagram = "c2";
        this.diagram.c1 = true;
        this.diagram.c2 = true;
        this.diagram.c3 = true;
      } else if (this.mainCircle == 10) {
      }
    },
    tabsAttribute(tab, event) {
      // console.log(tab, event);
      if (!tab) {
        return;
      }
      if (tab.index == 0) {
        if (this.mainCircle == 1) {
          this.diagram.c4 = true;
        }
      }
    },
    huisuclick() {
      alert("点击了 刷新数据");
    },
    tabsDiagram(tab, event) {
      console.log(tab, event);
      if (!tab) {
        return;
      }
      if (this.mainCircle == 1) {
        if (tab.index == 1) {
          this.diagram.c1 = true;
          this.diagram.c2 = true;
          this.diagram.c3 = true;
        } else if (tab.index == 2) {
          this.diagram.c6 = true;
        }
      } else if (this.mainCircle == 3) {
        if (tab.index == 2) {
          this.diagram.c8 = true;
        }
      }
    }
  }
};
</script>

<style lang="scss" >
@import url(../assets/css/base.css);

//////
.el-tabs__header {
  margin: 0;
}
.el-tabs__nav-scroll {
  background: linear-gradient(180deg, #f7f7f7 0%, #f3f3f3 100%);
}
.el-tabs__item {
  padding: 0;
  line-height: 26px;
  height: 26px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  border-top: 3px solid transparent;
}
.el-tabs__nav-wrap::after {
  display: none;
}
.el-tabs__item.is-active {
  border-color: rgba(0, 121, 106, 1);
}
.el-tabs__item:hover,
.el-tabs__item.is-active {
  color: rgba(0, 121, 106, 1);
}
.el-tabs__active-bar {
  display: none;
  bottom: auto;
  top: 0px;
  background-color: rgba(0, 121, 106, 1);
  height: 3px;
}

.attribute {
  .el-tabs__nav {
    width: 100%;
  }
  .el-tabs__item {
    width: 33%;
    text-align: center;
  }
}
.diagrambottom {
  .el-tabs__item {
    width: 84px;
    text-align: center;
  }
  .el-tabs__active-bar {
  }
}

.el-date-editor .el-range-separator {
  width: auto;
}

.el-button-group {
  .el-button {
    width: 34px;
    padding: 0px;
  }
}
.el-button {
  padding-top: 0px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(239, 239, 239, 1) 100%
  );
  box-shadow: 0px 1px 2px 0px rgba(68, 68, 68, 0.12);
  border-radius: 5px;
  border: 1px solid rgba(230, 231, 231, 1);
  position: relative;
}
.el-button.el-button--primary {
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(
    180deg,
    rgba(34, 175, 157, 1) 0%,
    rgba(0, 121, 106, 1) 100%
  );
}

.el-icon-delete:before {
  content: "" !important;
}
/////

////
.shendudongcha {
  .el-input__inner {
    background: transparent !important;
    width: 208px;
  }
}

.huisuliebiao-time-search {
  .el-form-item__label {
    text-align: left !important;
  }
}

.paizhangzhushou {
  .el-dialog__body {
    padding: 0px;
  }
  .el-date-editor--daterange {
    width: 260px;
  }
}
</style>
 
<style scoped lang="scss">
.paizhangzhushou {
  .el-dialog__body {
    padding-top: 0px;
  }
  .search-dialog {
    padding: 0px;
    padding-left: 20px;
  }
  .panel {
    margin: 0px 56px;
  }
  .el-form-item {
    float: left;
    margin-right: 10px;
  }
  .buttonlist {
    float: none;
    text-align: center;
    padding: 10px 0px;
    .el-button + .el-button {
      margin-left: 20px;
    }
  }

  .panel-search {
    float: right;
    position: relative;
    .el-button--search {
      position: absolute;
      right: 0px;
      height: 100%;
      background: linear-gradient(
        180deg,
        rgba(34, 175, 157, 1) 0%,
        rgba(0, 121, 106, 1) 100%
      );
      border-radius: 0px 5px 5px 0px;
    }
  }
}

.portrait {
  .search {
    overflow: hidden;
    width: 100%;
    height: 48px;
    background-image: linear-gradient(-180deg, #ffffff 2%, #ffffff 100%);
    border-radius: 0 0 4px 0 0;
    box-shadow: 0 1px 9px 0 rgba(17, 116, 104, 0.18);
    padding-top: 10px;
    .el-form {
      float: left;
      margin-left: 15px;
      .el-form-item {
        float: left;
        margin-right: 20px;
      }
    }
    .el-button-group {
      float: left;
    }
    .button-group-operate {
      float: right;
      margin-right: 20px;
    }
  }

  .diagrampanel {
    background: #f6f6f6;
    height: 448px;
    position: relative;
    .diagram {
      box-shadow: 0 1px 9px 0 rgba(17, 116, 104, 0.18) inset;
      height: 100%;
      position: absolute;
      right: 254px;
      left: 0;
    }
    .attribute {
      float: right;
      width: 254px;
      background: #f6f6f6;
      .panel {
        .panel-title {
          margin-left: 10px;
        }
      }
      #c4 {
        height: 127px;
      }
      .attribute-1,
      .attribute-2 {
        &.panel-con {
          padding-left: 29px;
        }
        p {
          color: rgba(51, 51, 51, 1);
          margin-bottom: 6px;
          line-height: 100%;
        }
      }
      .huisuliebiao {
        .panel:nth-child(2) {
          .panel-con {
            padding-left: 29px;
          }
        }
      }
      .shendudongcha {
        .panel:nth-child(2) {
          .panel-con {
            padding-left: 29px;
          }
        }
      }
      .lujingfenxi {
        .pathpanel {
          .path {
            height: 30px;
            > span {
              display: block;
              width: 60px;
              float: left;
              color: rgba(51, 51, 51, 1);
            }
            > div {
              float: left;
              width: 148px;
              display: flex;
              justify-content: space-between;
              position: relative;
              &:before {
                content: "";
                width: 100%;
                height: 1px;
                background: #e1e1e1;
                position: absolute;
                top: 50%;
                left: 0px;
              }
              > a {
                position: relative;
                z-index: 1;
                display: block;
                width: 20px;
                text-align: center;
                line-height: 18px;
                height: 20px;
                display: block;
                background: rgba(246, 246, 246, 1);
                border: 1px solid rgba(225, 225, 225, 1);
                border-radius: 100%;
                &.active {
                  color: rgba(0, 121, 106, 1);
                  border: 1px solid rgba(187, 238, 233, 1);
                  background: rgba(187, 238, 233, 1);
                }
              }
            }
          }
        }
      }
    }
  }

  .diagrambottom {
    background: #f6f6f6;
    height: 224px;
    .panel {
      .panel-title {
        margin-left: 10px;
      }
    }
    .tabdiagram-1 {
      #c5 {
        height: 140px;
      }
      .el-collapse {
        margin-left: 20px;
        margin-right: 20px;
        background: rgba(248, 248, 248, 1);
      }

      .huisuliebiao-time {
        width: 96%;
        margin: 40px auto 0px;
        padding: 0 23px;
        height: 113px;
        background: rgba(246, 246, 246, 1);
        border: 1px solid rgba(226, 226, 226, 1);
        .huisuliebiao-time-search {
          margin: 0px 15px;
          height: 49px;
          padding-top: 15px;
          overflow: hidden;
          .el-form-item {
            float: left;
            margin-right: 30px;
          }
        }
        .line {
          margin: 0px 15px;
          display: flex;
          a {
            flex: 1;
            border-left: 0.5px solid #fff;
            border-right: 0.5px solid #fff;
            display: block;
            height: 24px;
            background: rgba(6, 187, 164, 1);
          }
        }
        .desc {
          display: flex;
          justify-content: space-between;
          a {
            margin-top: 9px;
            color: rgba(102, 102, 102, 1);
            position: relative;
            &::before {
              content: "";
              width: 1px;
              height: 9px;
              background: #e2e2e2;
              left: 50%;
              margin-left: -1px;
              top: -10px;
              position: absolute;
            }
          }
        }
      }
    }
    .tabdiagram-2 {
      position: relative;
      .lujingfenxi {
        padding: 20px;
        .longpath {
          height: 96px;
          .point {
            width: 12.5%;
            height: 96px;
            float: left;
            position: relative;
            &.active {
              a {
                width: 15px;
                height: 15px;
                background: rgba(187, 238, 233, 1);
                &::after {
                  width: 21px;
                  left: -4px;
                  top: -4px;
                  height: 21px;
                  border: 1px solid rgba(184, 236, 231, 1);
                }
              }
              p {
                color: #00796a;
              }
            }
            a {
              position: absolute;
              right: 0px;
              top: 16px;
              width: 11px;
              height: 11px;
              background: rgba(225, 225, 225, 1);
              border-radius: 100%;
              &::after {
                content: "";
                display: block;
                position: absolute;
                left: -3px;
                top: -3px;
                width: 15px;
                height: 15px;
                border: 1px solid rgba(225, 225, 225, 1);
                border-radius: 100%;
              }
            }

            p {
              position: absolute;
              text-align: center;
              right: 0px;
              top: 45px;
              transform: translateX(40%);
              color: rgba(153, 153, 153, 1);
              span {
                display: block;
              }
            }
          }
        }
      }
      .qushiyuce {
        .panel {
          float: left;
          width: 25%;
          padding-right: 2%;
        }
      }
      .shendudongcha {
        .tablewrap {
          padding-left: 20px;
          padding-top: 14px;
          width: 180px;
          .panel {
            width: 100%;
            height: 178px;
            background: rgba(240, 240, 240, 1);
            border: 1px solid rgba(226, 226, 226, 1);
            .panel-title {
              height: 26px;
              line-height: 26px;
              background: rgba(246, 246, 246, 1);
              border-bottom: 1px solid rgba(226, 226, 226, 1);
              margin-top: 0px;
            }
            .panel-con {
              height: 152px;
              overflow-y: auto;
              color: rgba(102, 102, 102, 1);
              ul {
                li {
                  height: 25px;
                  line-height: 25px;
                  padding-left: 35px;
                  &:hover,
                  &.active {
                    background: rgba(187, 238, 233, 1);
                  }
                }
              }
            }
          }
        }
        .yewutubiao-2-2 {
          position: absolute;
          left: 220px;
          right: 45px;
          height: 198px;
          top: 0px;
          #c7 {
            width: 100%;
            height: 100%;
          }
          a {
            position: absolute;
            top: 10px;
            right: 128px;
            width: 76px;
            height: 28px;
            background: linear-gradient(
              180deg,
              rgba(34, 175, 157, 1) 0%,
              rgba(0, 121, 106, 1) 100%
            );
            border-radius: 5px;
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            text-align: center;
            line-height: 28px;
          }
        }
      }
      .panel {
        padding-right: 8%;
        width: 33%;
        float: left;
        &:last-child {
          padding-right: 0;
        }
        .panel-con {
          width: 100%;
          height: 150px;
          > div {
            height: 150px;
            width: 100% !important;
          }
        }
      }
    }
    .tabdiagram-3 {
      padding: 20px;
      #c6 {
        height: 181px;
      }
    }
  }

  table {
    border-left: 1px solid rgba(226, 226, 226, 1);
    border-top: 1px solid rgba(226, 226, 226, 1);
    border-spacing: 0;
    td {
      border-right: 1px solid rgba(226, 226, 226, 1);
      border-bottom: 1px solid rgba(226, 226, 226, 1);
    }
    thead {
      background: rgba(244, 244, 246, 1);
      tr {
        td {
          text-align: center;
          height: 26px;
        }
      }
    }
    tbody {
      td {
        height: 28px;
      }
    }
  }
}
</style>
